<!--  -->
<template>
  <div class="meeting-container">
    <van-nav-bar title="会议"
                 :left-arrow="false">
      <template #right>
        <van-icon name="search"
                  class="left-icon"
                  size="20"
                  color="inherit"
                  @click="navigatorSearch" />
        <!-- 弹框 -->
        <van-popover v-model:show="showPopover"
                     theme="dark"
                     :actions="actions"
                     @select="onSelect"
                     placement="bottom-end">
          <template #reference>
            <van-icon name="add-o"
                      size="20"
                      color="inherit" />
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <!-- 滑动tab -->
    <van-tabs v-model:active="tabActive"
              sticky>
      <van-tab v-for="(tabItem, index) in tabs"
               :title="tabItem.name"
               :key="index">
        <!-- 会议记录 -->
        <van-swipe-cell>
          <van-config-provider :theme-vars="themeVars">
            <van-cell-group>
              <van-cell clickable
                        to="/meeting/detail">
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                  <span class="title-style-font">会议号：</span>
                  <van-tag type="primary"
                           class="meeting-num-style"
                           plain>1234567891234567</van-tag>
                </template>
                <!-- 使用 lable 插槽来自定义lable -->
                <template #label>
                  <span>发起人：张三李四{{ index }}</span>
                </template>
                <!-- 使用 lable 插槽来自定义lable -->
                <template #value>
                  <span>开会时间：2020-02-22 10:51:49</span>

                  <div>
                    <span>会议状态：<van-tag round
                               type="success">开会中</van-tag></span>
                  </div>
                </template>
              </van-cell>
            </van-cell-group>
          </van-config-provider>

          <template #right>
            <van-button square
                        text="删除"
                        type="danger"
                        class="delete-button" />
          </template>
        </van-swipe-cell>

        <!-- 会议记录 -->
        <van-swipe-cell>
          <van-config-provider :theme-vars="themeVars">
            <van-cell-group>
              <van-cell clickable
                        to="/meeting/detail">
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                  <span class="title-style-font">会议号：</span>
                  <van-tag type="primary"
                           class="meeting-num-style"
                           plain>123456789123456789</van-tag>
                </template>
                <!-- 使用 lable 插槽来自定义lable -->
                <template #label>
                  <span>发起人：张三李四{{ index }}</span>
                </template>
                <!-- 使用 lable 插槽来自定义lable -->
                <template #value>
                  <span>开会时间：2020-02-22 10:51:49</span>

                  <div>
                    <span>会议状态：<van-tag round
                               type="warning">未开始</van-tag></span>
                  </div>
                </template>
              </van-cell>
            </van-cell-group>
          </van-config-provider>

          <template #right>
            <van-button square
                        text="删除"
                        type="danger"
                        class="delete-button" />
          </template>
        </van-swipe-cell>
        <!-- 会议记录 -->
        <van-swipe-cell>
          <van-config-provider :theme-vars="themeVars">
            <van-cell-group>
              <van-cell clickable
                        to="/meeting/detail">
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                  <span class="title-style-font">会议号：</span>
                  <van-tag type="primary"
                           class="meeting-num-style"
                           plain>1234567891234567890</van-tag>
                </template>
                <!-- 使用 lable 插槽来自定义lable -->
                <template #label>
                  <span>发起人：张三李四{{ index }}</span>
                </template>
                <!-- 使用 lable 插槽来自定义lable -->
                <template #value>
                  <span>开会时间：2020-02-22 10:51:49</span>

                  <div>
                    <span>会议状态：<van-tag round
                               type="danger">已结束</van-tag></span>
                  </div>
                </template>
              </van-cell>
            </van-cell-group>
          </van-config-provider>

          <template #right>
            <van-button square
                        text="删除"
                        type="danger"
                        class="delete-button" />
          </template>
        </van-swipe-cell>
        <!-- 会议记录 -->
        <van-swipe-cell>
          <van-config-provider :theme-vars="themeVars">
            <van-cell-group>
              <van-cell clickable
                        to="/meeting/detail">
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                  <span class="title-style-font">会议号：</span>
                  <van-tag type="primary"
                           class="meeting-num-style"
                           plain>1234567891234567890</van-tag>
                </template>
                <!-- 使用 lable 插槽来自定义lable -->
                <template #label>
                  <span>发起人：张三李四{{ index }}</span>
                </template>
                <!-- 使用 lable 插槽来自定义lable -->
                <template #value>
                  <span>开会时间：2020-02-22 10:51:49</span>

                  <div>
                    <span>会议状态：<van-tag round
                               type="danger">已结束</van-tag></span>
                  </div>
                </template>
              </van-cell>
            </van-cell-group>
          </van-config-provider>

          <template #right>
            <van-button square
                        text="删除"
                        type="danger"
                        class="delete-button" />
          </template>
        </van-swipe-cell>
        <!-- 会议记录 -->
        <van-swipe-cell>
          <van-config-provider :theme-vars="themeVars">
            <van-cell-group>
              <van-cell clickable
                        to="/meeting/detail">
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                  <span class="title-style-font">会议号：</span>
                  <van-tag type="primary"
                           class="meeting-num-style"
                           plain>1234567891234567890</van-tag>
                </template>
                <!-- 使用 lable 插槽来自定义lable -->
                <template #label>
                  <span>发起人：张三李四{{ index }}</span>
                </template>
                <!-- 使用 lable 插槽来自定义lable -->
                <template #value>
                  <span>开会时间：2020-02-22 10:51:49</span>

                  <div>
                    <span>会议状态：<van-tag round
                               type="danger">已结束</van-tag></span>
                  </div>
                </template>
              </van-cell>
            </van-cell-group>
          </van-config-provider>

          <template #right>
            <van-button square
                        text="删除"
                        type="danger"
                        class="delete-button" />
          </template>
        </van-swipe-cell>
        <!-- 会议记录 -->
        <van-swipe-cell>
          <van-config-provider :theme-vars="themeVars">
            <van-cell-group>
              <van-cell clickable
                        to="/meeting/detail">
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                  <span class="title-style-font">会议号：</span>
                  <van-tag type="primary"
                           class="meeting-num-style"
                           plain>1234567891234567890</van-tag>
                </template>
                <!-- 使用 lable 插槽来自定义lable -->
                <template #label>
                  <span>发起人：张三李四{{ index }}</span>
                </template>
                <!-- 使用 lable 插槽来自定义lable -->
                <template #value>
                  <span>开会时间：2020-02-22 10:51:49</span>

                  <div>
                    <span>会议状态：<van-tag round
                               type="danger">已结束</van-tag></span>
                  </div>
                </template>
              </van-cell>
            </van-cell-group>
          </van-config-provider>

          <template #right>
            <van-button square
                        text="删除"
                        type="danger"
                        class="delete-button" />
          </template>
        </van-swipe-cell>
        <!-- 会议记录 -->
        <van-swipe-cell>
          <van-config-provider :theme-vars="themeVars">
            <van-cell-group>
              <van-cell clickable
                        to="/meeting/detail">
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                  <span class="title-style-font">会议号：</span>
                  <van-tag type="primary"
                           class="meeting-num-style"
                           plain>1234567891234567890</van-tag>
                </template>
                <!-- 使用 lable 插槽来自定义lable -->
                <template #label>
                  <span>发起人：张三李四{{ index }}</span>
                </template>
                <!-- 使用 lable 插槽来自定义lable -->
                <template #value>
                  <span>开会时间：2020-02-22 10:51:49</span>

                  <div>
                    <span>会议状态：<van-tag round
                               type="danger">已结束</van-tag></span>
                  </div>
                </template>
              </van-cell>
            </van-cell-group>
          </van-config-provider>

          <template #right>
            <van-button square
                        text="删除"
                        type="danger"
                        class="delete-button" />
          </template>
        </van-swipe-cell>
        <!-- 会议记录 -->
        <van-swipe-cell>
          <van-config-provider :theme-vars="themeVars">
            <van-cell-group>
              <van-cell clickable
                        to="/meeting/detail">
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                  <span class="title-style-font">会议号：</span>
                  <van-tag type="primary"
                           class="meeting-num-style"
                           plain>1234567891234567890</van-tag>
                </template>
                <!-- 使用 lable 插槽来自定义lable -->
                <template #label>
                  <span>发起人：张三李四{{ index }}</span>
                </template>
                <!-- 使用 lable 插槽来自定义lable -->
                <template #value>
                  <span>开会时间：2020-02-22 10:51:49</span>

                  <div>
                    <span>会议状态：<van-tag round
                               type="danger">已结束</van-tag></span>
                  </div>
                </template>
              </van-cell>
            </van-cell-group>
          </van-config-provider>

          <template #right>
            <van-button square
                        text="删除"
                        type="danger"
                        class="delete-button" />
          </template>
        </van-swipe-cell>
        <!-- 会议记录 -->
        <van-swipe-cell>
          <van-config-provider :theme-vars="themeVars">
            <van-cell-group>
              <van-cell clickable
                        to="/meeting/detail">
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                  <span class="title-style-font">会议号：</span>
                  <van-tag type="primary"
                           class="meeting-num-style"
                           plain>1234567891234567890</van-tag>
                </template>
                <!-- 使用 lable 插槽来自定义lable -->
                <template #label>
                  <span>发起人：张三李四{{ index }}</span>
                </template>
                <!-- 使用 lable 插槽来自定义lable -->
                <template #value>
                  <span>开会时间：2020-02-22 10:51:49</span>

                  <div>
                    <span>会议状态：<van-tag round
                               type="danger">已结束</van-tag></span>
                  </div>
                </template>
              </van-cell>
            </van-cell-group>
          </van-config-provider>

          <template #right>
            <van-button square
                        text="删除"
                        type="danger"
                        class="delete-button" />
          </template>
        </van-swipe-cell>
        <!-- 会议记录 -->
        <van-swipe-cell>
          <van-config-provider :theme-vars="themeVars">
            <van-cell-group>
              <van-cell clickable
                        to="/meeting/detail">
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                  <span class="title-style-font">会议号：</span>
                  <van-tag type="primary"
                           class="meeting-num-style"
                           plain>1234567891234567890</van-tag>
                </template>
                <!-- 使用 lable 插槽来自定义lable -->
                <template #label>
                  <span>发起人：张三李四{{ index }}</span>
                </template>
                <!-- 使用 lable 插槽来自定义lable -->
                <template #value>
                  <span>开会时间：2020-02-22 10:51:49</span>

                  <div>
                    <span>会议状态：<van-tag round
                               type="danger">已结束</van-tag></span>
                  </div>
                </template>
              </van-cell>
            </van-cell-group>
          </van-config-provider>

          <template #right>
            <van-button square
                        text="删除"
                        type="danger"
                        class="delete-button" />
          </template>
        </van-swipe-cell>
        <!-- 会议记录 -->
        <van-swipe-cell>
          <van-config-provider :theme-vars="themeVars">
            <van-cell-group>
              <van-cell clickable
                        to="/meeting/detail">
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                  <span class="title-style-font">会议号：</span>
                  <van-tag type="primary"
                           class="meeting-num-style"
                           plain>1234567891234567890</van-tag>
                </template>
                <!-- 使用 lable 插槽来自定义lable -->
                <template #label>
                  <span>发起人：张三李四{{ index }}</span>
                </template>
                <!-- 使用 lable 插槽来自定义lable -->
                <template #value>
                  <span>开会时间：2020-02-22 10:51:49</span>

                  <div>
                    <span>会议状态：<van-tag round
                               type="danger">已结束</van-tag></span>
                  </div>
                </template>
              </van-cell>
            </van-cell-group>
          </van-config-provider>

          <template #right>
            <van-button square
                        text="删除"
                        type="danger"
                        class="delete-button" />
          </template>
        </van-swipe-cell>
        <!-- 会议记录 -->
        <van-swipe-cell>
          <van-config-provider :theme-vars="themeVars">
            <van-cell-group>
              <van-cell clickable
                        to="/meeting/detail">
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                  <span class="title-style-font">会议号：</span>
                  <van-tag type="primary"
                           class="meeting-num-style"
                           plain>1234567891234567890</van-tag>
                </template>
                <!-- 使用 lable 插槽来自定义lable -->
                <template #label>
                  <span>发起人：张三李四{{ index }}</span>
                </template>
                <!-- 使用 lable 插槽来自定义lable -->
                <template #value>
                  <span>开会时间：2020-02-22 10:51:49</span>

                  <div>
                    <span>会议状态：<van-tag round
                               type="danger">已结束</van-tag></span>
                  </div>
                </template>
              </van-cell>
            </van-cell-group>
          </van-config-provider>

          <template #right>
            <van-button square
                        text="删除"
                        type="danger"
                        class="delete-button" />
          </template>
        </van-swipe-cell>
        <!-- 会议记录 -->
        <van-swipe-cell>
          <van-config-provider :theme-vars="themeVars">
            <van-cell-group>
              <van-cell clickable
                        to="/meeting/detail">
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                  <span class="title-style-font">会议号：</span>
                  <van-tag type="primary"
                           class="meeting-num-style"
                           plain>1234567891234567890</van-tag>
                </template>
                <!-- 使用 lable 插槽来自定义lable -->
                <template #label>
                  <span>发起人：张三李四{{ index }}</span>
                </template>
                <!-- 使用 lable 插槽来自定义lable -->
                <template #value>
                  <span>开会时间：2020-02-22 10:51:49</span>

                  <div>
                    <span>会议状态：<van-tag round
                               type="danger">已结束</van-tag></span>
                  </div>
                </template>
              </van-cell>
            </van-cell-group>
          </van-config-provider>

          <template #right>
            <van-button square
                        text="删除"
                        type="danger"
                        class="delete-button" />
          </template>
        </van-swipe-cell>
      </van-tab>
    </van-tabs>
    <div class="bottom-empty">没有数据啦</div>

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {


  data () {
    //这里存放数据
    var themeVars = {
      cellLabelFontSize: "0.3rem",
      cellFontSize: "0.3rem",
    };
    return {
      themeVars,
      active: 3,
      tabActive: 0,
      tabs: [
        { name: "全部", index: 0 },
        { name: "未开始", index: 1 },
        { name: "开会中", index: 2 },
        { name: "已结束", index: 3 },
      ],
      showPopover: false,
      // 左上弹框
      actions: [
        { text: "加入会议", icon: "add-o" },
        // { text: "临时会议", icon: "add-o" },
        // { text: "预定会议", icon: "add-o" },
      ],
    };
  },
  //方法集合
  methods: {
    init () { },
    // 调到搜索页面
    navigatorSearch () {
      this.$router.push("/search");
    },
    onSelect (action, index) {
      if (action.text = '加入会议') {
        this.$router.push('/meeting/join');
      } else if (action.text = '临时会议') {

      } else if (action.text = '预定会议') {

      }
    },
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    // 发送初始化请求
    this.init();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    //
  },
  //生命周期 - 创建之前
  beforeCreate () {
  },
  //生命周期 - 挂载之前
  beforeMount () {
  },
  //生命周期 - 更新之前
  beforeUpdate () {
  },
  //生命周期 - 更新之后
  updated () {
  },
  //生命周期 - 销毁之前
  beforeUnmount () { },
  //生命周期 - 销毁完成
  unmounted () { },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated () { },
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类

.meeting-container {
  position: relative;
  background: whitesmoke;
}
.bottom-empty {
  text-align: center;
  height: 2rem;
  color: #969799;
}
.left-icon {
  margin-right: 20px;
}
.delete-button {
  height: 100%;
}
.title-style-font {
  font-size: 0.36rem;
}
.meeting-num-style {
  font-size: 10px;
}
</style>
